<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style>
			div{
				width: 100px;
				height: 100px;
			}
			.one{
				/*border边框：盒子设置边框后占位大了,即边框增加在盒子外边.*/
				border: 1px solid red;
				/* padding内边距：
				 * 1.内容和边框有了距离
				 * 2.padding会影响盒子的大小:给有宽高的盒子设置padding,会撑大盒子.实际开发中要减去padding的值
				 * 3.简写(顺时针)：上 右 下 左； 上 左右 下； 上下 左右； 上下左右；
				*/
				padding: 5px 10px 15px 20px;
				/* margin外边距:盒子与盒子之间的距离.
				 * 简写(顺时针)：上 右 下 左； 上 左右 下； 上下 左右； 上下左右；
				 */
				/*margin: 100px 200px;*/
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="one">这是第一个盒子</div>
		<!--<div class="two">这是第二个盒子</div>-->
	</body>
</html>
